<template>
    <view class="slide-unlock" :style="{ background: backgroundColor }">
        <view class="slider-box">
            <view class="wave-container">
                <view class="progress-mask" :style="{
                    width: `${moveDistance}px`,
                    background: 'rgba(255, 255, 255, 0.1)',
                    transition: isMoving ? 'none' : 'width 0.3s ease-out'
                }"></view>
                <view v-if="showWave" class="wave" :style="{
                    background: `linear-gradient(90deg, 
                        transparent 0%,
                        transparent 20%,
                        ${waveColor} 50%,
                        transparent 80%,
                        transparent 100%)`
                }"></view>
            </view>

            <view class="text-container">
                <text class="slider-text" :style="{ color: textColor }">{{ sliderText }}</text>
            </view>

            <view class="progress" :class="{ 'fail': showFail }" :style="{
                width: `${moveDistance + 25}px`,
                transition: isMoving ? 'none' : 'all 0.3s ease-out',
                background: showFail ? failColor : successColor
            }">
                <view class="progress-inner"></view>
                <view class="progress-text-container">
                    <text v-if="showFail" class="fail-text" :style="{ color: textColor }">{{ failText }}</text>
                    <text v-else class="progress-text" :style="{
                        position: 'absolute',
                        left: `${textLeft}px`,
                        opacity: moveDistance >= textLeft ? 1 : 0,
                        transition: 'opacity 0.3s ease',
                        color: textColor
                    }">{{ completeText }}</text>
                </view>
            </view>

            <view class="slider" :class="{ 'slider-active': isActive }" :style="{
                transform: `translateX(${moveDistance}px)`,
                transition: isMoving ? 'none' : 'transform 0.3s ease-out'
            }" @touchstart.stop.prevent="touchStart" @touchmove.stop.prevent="touchMove"
                @touchend.stop.prevent="touchEnd" @touchcancel.stop.prevent="touchCancel">
                <text class="slider-arrow">→</text>
            </view>
        </view>
    </view>
</template>

<script setup>
import { getCurrentInstance, onMounted, ref } from 'vue';

// Props 定义
const props = defineProps({
    // 滑块文本
    sliderText: {
        type: String,
        default: '向右滑动解锁'
    },
    // 完成时的文本
    completeText: {
        type: String,
        default: '拖动到终点解锁'
    },
    // 失败时的文本
    failText: {
        type: String,
        default: '解锁失败'
    },
    // 背景颜色
    backgroundColor: {
        type: String,
        default: '#4080ff'
    },
    // 成功状态颜色
    successColor: {
        type: String,
        default: '#4cd964'
    },
    // 失败状态颜色
    failColor: {
        type: String,
        default: '#ff4444'
    },
    textColor: {
        type: String,
        default: '#ffffff'
    },
    waveColor: {
        type: String,
        default: 'rgba(255, 255, 255, 0.3)'
    },
    failDuration: {
        type: Number,
        default: 1000
    },
    resetDuration: {
        type: Number,
        default: 300
    },
    showWave: {
        type: Boolean,
        default: true
    }
})

// Emits 定义
const emit = defineEmits(['unlock'])

// 响应式状态
const isActive = ref(false)
const isMoving = ref(false)
const startX = ref(0)
const moveDistance = ref(0)
const maxDistance = ref(0)
const showFail = ref(false)
const sliderTextRef = ref(null)
const centerPosition = ref(0)
const textLeft = ref(0)

// 添加触摸状态跟踪
const isTouching = ref(false)

// mounted逻辑
onMounted(() => {
    const query = uni.createSelectorQuery().in(getCurrentInstance())
    query.select('.slide-unlock').boundingClientRect(data => {
        maxDistance.value = data.width - uni.upx2px(110)
    }).exec()

    // 获取文字位置
    query.select('.slider-text').boundingClientRect(data => {
        if (data) {
            // 计算文字中心位置
            const sliderWidth = uni.upx2px(110)
            centerPosition.value = (data.left + data.width / 2) - sliderWidth
        }
    }).exec()

    // 获取蓝色文字位置
    query.select('.slider-text').boundingClientRect(data => {
        if (data) {
            textLeft.value = data.left
        }
    }).exec()

    console.log('Wave color:', props.waveColor)
})

// 触摸事件处理函数
const touchStart = (e) => {
    isActive.value = true
    isMoving.value = true
    isTouching.value = true
    startX.value = e.touches[0].clientX
}

const touchMove = (e) => {
    if (!isTouching.value) return

    const moveX = e.touches[0].clientX - startX.value
    if (moveX < 0) {
        moveDistance.value = 0
    } else if (moveX >= maxDistance.value) {
        moveDistance.value = maxDistance.value
        emit('unlock')
        isMoving.value = false
        isTouching.value = false
        setTimeout(() => {
            moveDistance.value = 0
            isActive.value = false
        }, 500)
    } else {
        moveDistance.value = moveX
    }
}

const touchEnd = () => {
    isMoving.value = false
    isTouching.value = false

    if (moveDistance.value < maxDistance.value) {
        showFail.value = true
        setTimeout(() => {
            moveDistance.value = 0
            isActive.value = false
            setTimeout(() => {
                showFail.value = false
            }, props.resetDuration)
        }, props.failDuration)
    }
}

// 添加触摸取消处理
const touchCancel = () => {
    isMoving.value = false
    isTouching.value = false
    moveDistance.value = 0
    isActive.value = false
}
</script>

<style lang="scss" scoped>
.slide-unlock {
    width: 100%;
    height: 110rpx;
    border-radius: 55rpx;
    position: relative;
    overflow: hidden;
    background: #4080ff;
    box-shadow: inset 0 4rpx 12rpx rgba(0, 0, 0, 0.2);

    .wave-container {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: 1;
    }

    .progress-mask {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        z-index: 1;
    }

    .wave {
        position: absolute;
        left: -20%;
        top: 0;
        width: 15%;
        height: 100%;
        animation: waveMove 2s ease-out infinite;
        will-change: transform;
        filter: blur(5px);
        z-index: 2;
    }

    .text-container {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;

        .slider-text {
            position: relative;
            width: 100%;
            text-align: center;
            color: #fff;
            font-size: 28rpx;
            white-space: nowrap;
        }
    }

    .progress {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        background: #4cd964;
        z-index: 3;
        will-change: width;
        overflow: hidden;
        transition: background-color 0.3s ease;

        .progress-inner {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            box-shadow: inset 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
            background: linear-gradient(to bottom,
                    rgba(0, 0, 0, 0.1) 0%,
                    rgba(0, 0, 0, 0) 50%,
                    rgba(255, 255, 255, 0.05) 100%);
        }

        &.fail {
            // background: #ff4444;
        }

        .progress-text-container {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

            .progress-text,
            .fail-text {
                color: #fff;
                font-size: 28rpx;
                white-space: nowrap;
                text-align: center;
                width: 100%;
            }

            .fail-text {
                position: absolute;
                width: 100%;
                text-align: center;
                color: #fff;
                font-size: 28rpx;
                white-space: nowrap;
                opacity: 0;
                animation: fadeIn 0.3s ease forwards;
            }
        }
    }

    .slider {
        position: absolute;
        left: 0;
        top: 0;
        width: 110rpx;
        height: 110rpx;
        background: #fff;
        border-radius: 55rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        will-change: transform;
        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.2);
        z-index: 4;

        &-active {
            box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.3);
        }

        &-arrow {
            color: #4080ff;
            font-size: 24rpx;
        }
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes waveMove {
    0% {
        transform: translateX(0);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        transform: translateX(800%);
        opacity: 0;
    }
}
</style>